<template>
  <el-row class="root-el-row">
    <el-col :span="6">
      <el-tree :data="routeMenus"
               :props="{children: 'children',label: 'name'}"
               node-key="id"
               @node-click="handleNodeClick"
               :highlight-current="true"
               :expand-on-click-node="false"
               :default-expand-all="true" :indent="30" style="min-height: 800px">
         <span class="custom-tree-node" :key="data.id" slot-scope="{ node, data }">
           {{ data.name }}
        </span>
      </el-tree>
    </el-col>


    <!--  l  -->
    <el-col :span="18" v-if="currentRoute">
      <el-card class="box-card"
               shadow="always"
               :body-style="{margin: '15px' }"
      >

        <div slot="header" class="clearfix">
          <span>{{ currentRoute.path }} </span>
          <span style="float: right">{{ currentRoute.name }} </span>
        </div>

        <el-form ref="form" :model="currentRoute" label-width="80px" class="box-card-disable">
          <el-row>
            <el-col :span="11">
              <el-form-item label="路由名称" >
                <el-input v-model="currentRoute.name"></el-input>
              </el-form-item>
              <el-form-item label="父ID" >
                <el-input v-model="currentRoute.parentId"></el-input>
              </el-form-item>
              <el-form-item label="路径" >
                <el-input v-model="currentRoute.path"></el-input>
              </el-form-item>
              <el-form-item label="重定向路由路径" >
                <el-input v-model="currentRoute.redirect"></el-input>
              </el-form-item>
              <el-form-item label="组件路径" >
                <el-input v-model="currentRoute.component"></el-input>
              </el-form-item>
              <el-form-item label="meta元数据" >
                <template v-for="(val,key,i) in currentRoute.meta">
                  <div :key="i"> {{key}} : {{val}};</div>
                </template>
              </el-form-item>
              <el-form-item label="icon图标" >
                <el-input v-model="currentRoute.icon"></el-input>
              </el-form-item>
              <el-form-item label="是否隐藏">
                <el-radio v-model="currentRoute.hidden"  :disabled="true" :label="true">隐藏</el-radio>
                <el-radio v-model="currentRoute.hidden"  :disabled="true" :label="false">不隐藏</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="11">
              <el-form-item label="关联api菜单ID" >
                <el-input v-model="currentRoute.apiId"></el-input>
              </el-form-item>
              <el-form-item label="类型" >
                <el-radio v-model="currentRoute.type" :disabled="true" :label="1">菜单</el-radio>
                <el-radio v-model="currentRoute.type" :disabled="true" :label="2">按钮</el-radio>
              </el-form-item>
              <el-form-item label="描述" >
                <el-input v-model="currentRoute.description"></el-input>
              </el-form-item>
              <el-form-item label="创建时间" >
                <el-date-picker v-model="currentRoute.createTime" type="datetime" placeholder="time"></el-date-picker>
              </el-form-item>
              <el-form-item label="修改时间" >
                <el-input v-model="currentRoute.updateTime"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


        </el-form>
        <!--
        <el-divider></el-divider>
        <el-button style="float: right; padding: 3px 0" type="primary" @click="updateRouteMenu">暂时不提供修改，只查询</el-button>
        -->
      </el-card>
    </el-col>
  </el-row>

</template>

<script>
import {getRouteMenuTree} from "@/api/menu"

export default {
  name: "Menu",
  components: {
  },
  data() {
    return {
      routeMenus: [],
      currentRoute: null,

    };
  },
  mounted() {
    this.getRouteMenuTree()
  },
  methods: {
    getRouteMenuTree() {
      getRouteMenuTree().then(res => {
        this.routeMenus = res.data;
      })
    },
    handleNodeClick(data) {
      this.currentRoute = this.copyMenu(data)
      this.currentRoute.metaStr=JSON.stringify(this.currentRoute.meta)
    },
    copyMenu(menu) {
      return JSON.parse(JSON.stringify(menu));
    },
    updateRouteMenu() {
      this.$message.info("暂时不提供修改")
    }
  }
};
</script>

<style scoped lang="scss">
.text {
  font-size: 14px;
}

.box-card-disable {
  pointer-events: none;
}
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 55em;
  margin: 8px;
  left: 10px;
  vertical-align: middle;
  position: relative;
}
</style>